<template>
	<view class="content">
		<!-- 轮播图 -->
		<swiper class="carousel" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
			<swiper-item v-for="(item, index) in carouselImages" :key="index" @click="showImagePreview(item)">
				<image :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!-- 修改：系统公告改为圆角面板，添加小喇叭图标 -->
		<view class="announcement-panel">
			<view class="announcement-icon">
				<image src="/static/logo.png" mode="aspectFit"></image>
			</view>
			<marquee behavior="scroll" direction="left" scrollamount="2">
				系统公告：欢迎来到赛鸽之家！请遵守赛鸽规则，文明参赛。
			</marquee>
		</view>

		<!-- 功能区域 -->
		<!-- <view class="function-area">
			<view class="function-block" @click="navigateTo('demo1')">
				<image class="function-icon" src="/static/images/saige1.jpg"></image>
				<text class="function-title">赛事信息</text>
			</view>
			<view class="function-block" @click="navigateTo('rank')">
				<image class="function-icon" src="/static/images/saige3.jpg"></image>
				<text class="function-title">排名查询</text>
			</view>
			<view class="function-block" @click="navigateTo('breed')">
				<image class="function-icon" src="/static/images/saige2.jpg"></image>
				<text class="function-title">育种知识</text>
			</view>
			<view class="function-block" @click="navigateTo('community')">
				<image class="function-icon" src="/static/images/saige1.jpg"></image>
				<text class="function-title">社区交流</text>
			</view>
		</view> -->

		<!-- 新增标题区域 -->
		<view class="statistics-title">
			<view class="title-block">
				<text>预选鸽主名单</text>
			</view>
			<view class="title-block">
				<text>已更新{{ this.statisticsData.length }}组</text>
			</view>
		</view>

		<!-- 5*10表格统计 -->
		<view class="statistics">
			<table>
				<thead>
					<tr>
						<th>序号</th>
						<th>指定人</th>
						<th>鸽主</th>
						<th>地址</th>
						<th>足环号</th>
						<th>飞速</th>
						<th>名次</th>
						<th>总分</th>
						<th>备注</th>
					</tr>
				</thead>
				<tbody>
					<!-- 按每2行分组循环 -->
					<tr v-for="(item, index) in statisticsData" :key="index">
						<!-- 序号 -->
						<td>{{ index + 1 }}</td>
						<!-- 指定人 -->
						<td>{{ item.designated_person }}</td>
						<!-- 鸽主 -->
						<td class="double-cell">
							<div class="owner-row">{{ item.owner.owner_a }}</div>
							<div class="owner-row">{{ item.owner.owner_b }}</div>
						</td>
						<!-- 地址 -->
						<td class="double-cell">
							<div class="cell-row ">{{ item.address.address_a }}</div>
							<div class="cell-row">{{ item.address.address_b }}</div>
						</td>
						<!-- 编号 -->
						<td class="double-cell">
							<div style="width: 18rex;" class="cell-row ">{{ item.foot_ring_number.foot_ring_number_a }}
							</div>
							<div class="cell-row">{{ item.foot_ring_number.foot_ring_number_b }}</div>
						</td>
						<!-- 飞速 -->
						<td class="double-cell">
							<div class="cell-row">{{ item.speed.speed_a }}</div>
							<div class="cell-row">{{ item.speed.speed_b }}</div>
						</td>
						<!-- 名次 -->
						<td class="double-cell">
							<div class="cell-row">{{ item.rank.rank_a }}</div>
							<div class="cell-row">{{ item.rank.rank_b }}</div>
						</td>
						<!-- 总分 -->
						<td>{{ item.serial_number }}</td>
						<!-- 备注 -->
						<td>{{ item.remarks.remarks_a }}</td>
					</tr>
					<tr v-if="statisticsData.length === 0">
						<td colspan="8" class="empty-tip">暂无赛事数据，请先添加参赛记录</td>
					</tr>
				</tbody>
			</table>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				carouselImages: [
					'/static/images/saige1.jpg',
					'/static/images/saige2.jpg',
					'/static/images/saige3.jpg'
				],
				statisticsData: [],
			}
		},
		onLoad() {
			this.getSaigeData();
		},
		methods: {
			navigateTo(page) {
				uni.navigateTo({
					url: `/pages/${page}/${page}`
				});
			},
			showImagePreview(imageUrl) {
				uni.previewImage({
					urls: [imageUrl],
					current: imageUrl
				});
			},
			async getSaigeData() {
				const {
					result
				} = await uniCloud.callFunction({
					name: 'CRUDaigeData',
					data: {
						action: 'get',
						params: {}
					}
				});
				if (result?.code === 200 && result.data) {
					this.statisticsData = result.data.data.map((item, index) => ({
						serial: index + 1 || "待分配",
						designated_person: item.designated_person?.trim() || "未指定",
						foot_ring_number: `${item.foot_ring_number_a || '无'} || ${item.foot_ring_number_b || '无'}`,
						owner: {
							owner_a: item.owner_a || '无名',
							owner_b: item.owner_b || '无名',
						},
						address: {
							address_a: item.address_a?.replace(/\s+/g, '') || '地址未登记',
							address_b: item.address_b?.replace(/\s+/g, '') || '地址未登记',
						},
						number: item.serial_number?.toString().padStart(4, '0') || '0000',
						speed: {
							speed_a: item.speed_a ?? '-',
							speed_b: item.speed_b ?? '-',
						},
						rank: {
							rank_a: item.rank_a ?? '-',
							rank_b: item.rank_b ?? '-',
						},
						foot_ring_number: {
							foot_ring_number_a: item.foot_ring_number_a || '无',
							foot_ring_number_b: item.foot_ring_number_b || '无',
						},
						color: {
							color_a: item.color_a?.toLowerCase() || '无',
							color_b: item.color_b?.toLowerCase() || '无',
						},
						serial_number: item.serial || '0000',
						remarks: {
							remarks_a: item.remarks_a || '暂无备注信息',
							remarks_b: item.remarks_b || '暂无备注信息',
						},
					}));
				}
				console.log(this.statisticsData);
			},
		},

		computed: {



		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to bottom, #dddddd, #ffffff);
		/* 修改背景为深灰到米白的渐变色 */
		background-size: cover;
		background-attachment: fixed;
		/* filter: blur(2px); */
		/* 增加模糊效果 */
		color: #333;
		padding: 20rpx;
	}

	/* 表格分割线样式 */
	table {
		border-collapse: collapse;
		width: auto;
		min-width: 100%;
	}

	td,
	th {
		border-bottom: 1px solid #e0e0e0;
		padding: 8px;
		text-align: center;
	}

	/* 列样式控制 */
	.serial-col {
		color: #666;
		font-weight: bold;
	}

	.designated-person-col {
		color: #2196F3;
	}

	.foot-ring-number-col {
		color: #4CAF50;
	}

	.owner-col {
		color: #9C27B0;
	}

	.address-col {
		color: #FF5722;
		background-color: #bd0000;
	}

	.number-col {
		color: #607D8B;
	}

	.speed-col {
		color: #F44336;
	}

	.rank-col {
		color: #3F51B5;
	}

	.color-col {
		font-style: italic;
	}

	.remarks-col {
		color: #795548;
	}

	.double-owner {
		position: relative;
		padding: 4px 6px;
	}

	.owner-row:not(:last-child)::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		border-bottom: 1px solid #999;
	}

	.header {
		position: relative;
		height: 150rpx;
		width: 100%;
		overflow: hidden;
		background: linear-gradient(15deg, #ffaa00, #ff0000);
		/* 修改为45度红黄渐变 */
		border-radius: 10rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

	}

	.header-image {
		width: 100%;
		height: 100%;
		filter: brightness(0.9);
	}

	.header-text {
		position: absolute;
		bottom: 30rpx;
		left: 30rpx;
		color: #ffffff;
	}

	.header-title {
		font-size: 50rpx;
		font-weight: bold;
	}

	.header-subtitle {
		font-size: 30rpx;
		margin-top: 10rpx;
	}

	.carousel {
		height: 400rpx;
		width: 100%;
		margin-top: 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.carousel image {
		width: 100%;
		height: 100%;
	}

	/* 修改：系统公告改为圆角面板，添加小喇叭图标样式 */
	.announcement-panel {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #fffae8;
		padding: 10rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		color: red;
		margin-top: 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.announcement-icon {
		width: 60rpx;
		height: 60rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.announcement-icon image {
		width: 100%;
		height: 100%;
	}

	.announcement-panel marquee {
		padding: 0 20rpx;
		flex: 1;
	}

	/* 修改功能区域样式 */
	.function-area {
		display: flex;
		justify-content: space-around;
		width: 100%;
		/* 确保功能区宽度与父容器一致 */
		margin-top: 20rpx;
		padding: 10rpx 0;
		background: linear-gradient(15deg, #ffaa00, #ff0000);
		/* 修改为45度红黄渐变 */
		border-radius: 10rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.function-block {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		/* 每个功能块均匀分布 */
		padding: 20rpx;
		margin: 0 10rpx;
		/* 添加左右间距，确保对齐 */
		border-radius: 10rpx;
		background-color: #f5f5f5;
		transition: transform 0.2s, box-shadow 0.2s;
		cursor: pointer;
	}

	.function-block:active {
		transform: translateY(-5px);
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);
	}

	.function-icon {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 10rpx;
		border-radius: 50%;
		/* 修改为圆形遮罩 */
		background-color: #ffaa00;
		padding: 10rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		object-fit: cover;
		/* 确保图片内容在圆形内居中显示 */
	}

	.function-title {
		font-size: 28rpx;
		color: #0000ff;
	}

	/* 新增标题区域样式 */
	.statistics-title {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-top: 30rpx;
		background: linear-gradient(15deg, #ffaa00, #ff0000);
		/* 修改为45度红黄渐变 */
		border-radius: 10rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		gap: 10rpx;
		/* 添加区域块之间的间距 */
	}

	.title-block {
		flex: 1;
		text-align: center;
		color: #ffffff;
		padding: 0 20rpx;
		/* 增加内边距以优化视觉效果 */
	}

	/* 修改表格统计样式，保持与上方区域等宽 */
	.statistics {
		margin-top: 5rpx;
		width: 100%;
		/* 保持与父容器等宽 */
		overflow-x: auto;
		overflow-y: auto;
		max-height: 500rpx;
		min-width: auto;
		/* 移除固定最小宽度，改为自动适应 */
	}

	.statistics table {
		width: 100%;
		border-collapse: collapse;
		min-width: 1200rpx;
		/* 保持表格内容最小宽度触发滚动 */
	}

	.statistics table thead {
		position: sticky;
		top: 0;
		background: linear-gradient(15deg, #ffaa00, #ff0000);
		/* 修改为45度红黄渐变 */
		color: #fff;
	}

	.statistics table th,
	.statistics table td {
		border: 1rpx solid #ccc;
		text-align: center;
		padding: 10rpx;
	}

	.statistics table td {
		border: 1rpx solid #ccc;
		text-align: center;
		padding: 10rpx;
		background-color: #FAFAFA;
		/* 修改表格内容背景色为米白色 */
	}

	.navigation {
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
		padding: 20rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10rpx;
		border-radius: 10rpx;
		transition: transform 0.2s;
	}

	.nav-item:hover {
		transform: scale(1.05);
	}

	.nav-icon {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 10rpx;
	}

	.nav-text {
		font-size: 28rpx;
		color: #333;
	}

	.featured-content {
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
		padding: 20rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.featured-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		border-radius: 10rpx;
		transition: transform 0.2s;
	}

	.featured-item:hover {
		transform: scale(1.05);
	}

	.featured-image {
		width: 250rpx;
		height: 250rpx;
		margin-bottom: 10rpx;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.featured-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		margin-top: 10rpx;
	}

	.featured-description {
		font-size: 28rpx;
		color: #666;
		margin-top: 5rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 20rpx 0;
		text-align: center;
		box-shadow: 0 -4rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.footer-text {
		font-size: 28rpx;
		color: #333;
	}

	/* Hover effects */
	.nav-hover {
		background-color: rgba(0, 0, 0, 0.05);
	}

	.featured-hover {
		background-color: rgba(0, 0, 0, 0.05);
	}

	/* 修复：明确各列颜色与表格标题的对应关系 */
	/* 序号列（第1列） */
	.statistics table td:nth-child(1) {
		color: #333;
		/* 默认深灰色 */
	}

	/* 修复：明确隔离配组列与地址列的颜色样式 */
	/* 配组名列（第2列） */
	.statistics table td:nth-child(2) {
		color: #000000;
		/* 单独设置配组列颜色 */
	}

	/* 地址列（第4列） */
	.statistics table td:nth-child(4) {
		color: #000000;
		/* 保持地址列为黑色 */
	}

	/* 其他列保持原有样式 */
	.statistics table td:nth-child(1) {
		color: #333;
	}

	/* 序号列 */
	.statistics table td:nth-child(3) {
		color: #0c0c0c;
	}

	/* 鸽主列 */
	.statistics table td:nth-child(5),
	.statistics table td:nth-child(6),
	.statistics table td:nth-child(7),
	.statistics table td:nth-child(8) {
		color: #333;
	}

	/* 编号/飞速/名次/总分列 */

	/* 总分列（第8列） */
	.statistics table td:nth-child(8) {
		color: #333;
		/* 默认深灰色 */
	}

	.double-owner {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 6px;
		background: #f8f8f8;
		width: auto;
		border-radius: 4px;
	}

	.owner-row {
		line-height: 0.8em;
		padding: 2px 0;

		&:not(:last-child) {
			border-bottom: 1px dashed #eee;
		}
	}

	.double-owner {
		position: relative;
		padding: 4px 0;
	}

	.owner-row {
		line-height: 1.2em;
		padding: 2px 4px;
	}

	.owner-row:not(:last-child)::after {
		content: '';
		position: absolute;
		left: 4px;
		right: 4px;
		bottom: 0;
		border-bottom: 1px dashed #e0e0e0;
	}

	.statistics {
		position: relative;
		height: 100%;
		overflow: auto;
	}



	thead {
		position: sticky;
		top: 0;
		background: #fff;
		z-index: 1;
	}

	.normal-table {
		border: 1px solid #ddd;
		white-space: nowrap;
		overflow-x: auto;
		display: flex;
		flex-direction: column;
		height: calc(100vh - 200px);
	}

	.normal-table th,
	.normal-table td {
		border: 1px solid #ddd;
		padding: 8px;
		white-space: nowrap;
	}

	.normal-table tbody {
		flex: 1;
		overflow-y: auto;
	}
</style>